<script setup lang="ts">
import { useUserStore } from '../stores/user'
import { getUserList } from '../../utils/api'
import { ref, reactive } from 'vue'

const store = useUserStore()
const data = reactive({
  user: {
    account: '',
    avatar: '',
    likeNumber: '',
    collectionNumber: '',
    score: '',
    couponNumber: ''
  }
})

getUserList().then(res => {
  console.log("用户数据", res);
  data.user = res.data
})


</script>

<template>
  <div class="home">
    <div class="top">
      <van-image round width="5rem" class="img" height="5rem" :src="data.user.avatar" />
      <div>
        <span class="h">{{ data.user.account }}</span><br>
        <van-icon style="color: #69c6b2;margin-top: 15px;font-size: 20px;" name="edit" />
      </div>
    </div>
    <ul>
      <li>
        <span>{{ data.user.collectionNumber }}</span>
        <p>收藏</p>
      </li>
      <li>
        <span>{{ data.user.likeNumber }}</span>
        <p>关注</p>
      </li>
      <li>
        <span>{{ data.user.score }}</span>
        <p>积分</p>
      </li>
      <li>
        <span>{{ data.user.couponNumber }}</span>
        <p>优惠券</p>
      </li>
    </ul>
    <div class="drugorder">
      <p class="drug">药品订单 <span class="order">全部订单<van-icon name="arrow" /></span></p>
      <ul>
        <li>
          <span><van-image round class="img" src="../../public/代付款.png" /></span>
          <p>待付款</p>
        </li>
        <li>
          <span><van-image round class="img" src="../../public/待发货.png" /></span>
          <p>待发货</p>
        </li>
        <li>
          <span><van-image round class="img" src="../../public/待收货.png" /></span>
          <p>待收货</p>
        </li>
        <li>
          <span><van-image round class="img" src="../../public/已完成.png" /></span>
          <p>已完成</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
.home {
  width: 100%;
  height: 100vh;
  /* 从上至下渐变色 */
  background: -webkit-linear-gradient(#b7e2df, #eee, #eee, #eee);
  padding: 15px;
}

.top {
  width: 100%;
  display: flex;
  padding: 30px 0 10px 0;
}

.img {
  margin: 0 20px;
}

.h {
  font-size: 24px;
  font-weight: 400;
}

ul {
  width: 100%;
  display: flex;
  align-content: center;
}

li {
  width: 25%;
  text-align: center;
}

.drugorder {
  width: 100%;
  /* margin: 20px 0; */
  background: #fff;
  /* padding: 15px; */
  border-radius: 10px;
}

.drug {
  padding: 15px;
  font-weight: 800;
  font-size: 20px;
}

.order {
  font-size: 14px;
  color: #ddd;
  font-weight: 0;
  float: right;
}
</style>
